<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-items</title>
    <style>
        .box{
            display: flex;
            flex-wrap: wrap;
        }
        [class*='items-']{
            flex-grow: 2;
            flex-shrink: 1;
            flex-basis: 200px;
            align-items: stretch;
            margin: 10px;
        }
        [class*='items-12']{
            order: -1;
        }
         [class*='items-11']{
            order: -1;
            flex:1;
            /* ==flex-grow0flex-shrink1,flex-basis:auto. */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="items-1" title="11*11">222</div>
        <div class="items-2" title="21*11">333</div>
        <div class="items-3" title="31*11">333</div>
        <div class="items-4" title="41*11">4444</div>
        <div class="items-5" title="51*11">555</div>
        <div class="items-6" title="61*11">6666</div>
        <div class="items-7" title="71*11">7777</div>
        <div class="items-8" title="81*11">8888</div>
        <div class="items-9" title="91*11">9999</div>
        <div class="items-10" title="101*11">1010</div>
        <div class="items-11" title="111*11">111111</div>
        <div class="items-12" title="121*11">2334444</div>
    </div>

</body>
</html>